import React from 'react';
import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
import { RING_COLORS, tooltip } from '../../../water-prevention/components/charts/constants';
/**
 * props
 * height: 图表高度
 * subtext: 副标题文本，如果不提供则使用默认值
 * showUnits: 是否显示数据的单位
 */

function RingChart(props) {
    const { data, image = {}, subtext = 'AQI', showUnits = false } = props;
    // eslint-disable-next-line react/destructuring-assignment
    const colors = props.colors || RING_COLORS;
    // 空气质量数据固定显示16
    const centerValue = (subtext === 'AQI') ? 16 : data.reduce((pre, cur) => pre + cur.value, 0);
    
    const getOption = () => {
        const option = {
            graphic: {
                type: 'image',
                style: {
                    image: image.url,
                    width: image.width,
                    height: image.height,
                },
                left: 'center',
                top: 'center',
            },
            title: {
                text: centerValue,
                subtext: subtext,
                textStyle: {
                    color: '#E2F8FF',
                    fontSize: 25,
                    align: 'center',
                    fontFamily: 'DINMediumItalic',
                    fontWeight: 'Italic',
                    letterSpacing: '2.08px',
                },
                subtextStyle: {
                    fontSize: 14,
                    fontWeight: 400,
                    color: ['#E6EFFF'],
                },
                x: 'center',
                y: 'center',
                top: '35%',
            },
            tooltip: {
                ...tooltip,
                trigger: 'item',
                formatter: (params) => {
                    const item = data.find(d => d.name === params.name);
                    if (item && item.unit) {
                        return `${params.name}: ${params.value}${item.unit}`;
                    }
                    // 检测是否为空气质量数据
                    if (['PM2.5', 'PM10', 'SO₂', 'NO₂', 'O₃', 'CO', 'VOCS'].includes(params.name)) {
                        return `${params.name}: ${params.value}`;
                    }
                    return `${params.name}: ${params.value}人 (${params.percent}%)`;
                },
                position: ['10%', '40%'],
            },
            // 渐变色
            color: colors.map((s) => {
                const cs = new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                    { offset: 0, color: s.linearGradientFrom },
                    { offset: 0.9, color: s.linearGradientTo },
                ]);
                return cs;
            }),

            series: [
                {
                    type: 'pie',
                    radius: ['66%', '80%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        // 环图间隙
                        borderColor: '#0A1024',
                        borderWidth: 3,
                    },
                    label: {
                        show: false,
                        position: 'center',
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '40',
                            fontWeight: 'bold',
                        },
                    },
                    labelLine: {
                        show: false,
                    },
                    data,
                },
            ],
        };

        return option;
    };
    const { height, width } = props;
    const options = getOption();
    const total = data?.reduce((p, c) => p + c.value, 0);
    
    const renderList = () => data.map((s, index) => {
        // 检测是否为空气质量数据
        const isAirQuality = ['PM2.5', 'PM10', 'SO₂', 'NO₂', 'O₃', 'CO', 'VOCS'].includes(s.name);
        
        let valueDisplay;
        if (isAirQuality && showUnits) {
            valueDisplay = (
                <div className="type-leagle-value">
                    {s.value}{s.unit || ''}
                </div>
            );
        } else if (isAirQuality) {
            valueDisplay = (
                <div className="type-leagle-value">{s.value}</div>
            );
        } else {
            valueDisplay = (
                <div className="type-leagle-value">
                    {s.value} 
                    <div style={{ 
                        textAlign: 'right', 
                        display: 'inline-block', 
                        width: 40, 
                        fontSize: 14, 
                        color: colors[index]?.linearGradientFrom 
                    }}>
                        {Math.round(s.value / total * 100)}%
                    </div>
                </div>
            );
        }
        
        return (
            <div 
                key={s.name || index} 
                className="type-leagle-item flex-row flex-item-center" 
                style={{ 
                    background: "linear-gradient(90deg, #002C6C 0%, #1e293800 100%)", 
                    height: 24, 
                    marginBottom: 8, 
                    width: 180 
                }}
            >
                <div className="flex-row flex-item-center">
                    <div 
                        className="type-leagle-dot" 
                        style={{ background: colors[index]?.linearGradientFrom }}
                    />
                    <div className="type-leagle-label">{s.name}</div>
                </div>
                {valueDisplay}
            </div>
        );
    });

    return (
        <div style={{ height: '100%' }} className="flex-row flex-item-center">
            <div className="type-chart-wrapper">
                <ReactEcharts
                    option={options}
                    notMerge
                    lazyUpdate
                    style={{ height: height || '174px', margin: '0', width: width || 'auto' }}
                />
            </div>
            <div className="type-leagle-wrapper flex-row flex-content-between" style={{ height: 220, paddingLeft: 10, paddingRight: 10 }}>
                {renderList()}
            </div>
        </div>
    );
}

export default RingChart;
